@import "../../../index.scss";

.form {
  > .form-item + .form-item {
    margin-top: 1rem;
  }

  .form-item {
    display: flex;
    flex-direction: column;

    label {
      font-weight: 700;
    }

    input, select {
      background-color: $primary-light-color;
      border: 0;
      color: $dark-main-color;
      border-bottom: 1px solid $dark-main-color;
      padding: .5rem ;
      transition: transform .2s ease-in,
      border-bottom-width .2s ease-in;
    }

    input:focus {
      outline: none;
      transform: scale(1.01);
      border-bottom-width: 2px;
    }

    .form-item__field {
      display: flex;
      flex-direction: column;
    }

    &.form-item__password-field {
      position: relative;
    }

    &.form-item__password-field input {
      padding: .5rem 2.5rem .5rem .5rem;
    }

    &.form-item__password-field .icon {
      position: absolute;
      top: 1.5rem;
      right: 1rem;
    }

  }
}

